<template>
  <!-- 创建词条 -->
  <el-dialog
    title="创建词条"
    :visible.sync="show"
    :show-close="false"
    width="50%"
    class="dialog-wrap"
    close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="词条名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="词条分类">
        <el-select v-model="form.cate" placeholder="请选择">
          <el-option label="关于我们" value="about"></el-option>
          <el-option label="帮助中心" value="help"></el-option>
          <el-option label="优惠" value="discounts"></el-option>
          <el-option label="问答" value="qa"></el-option>
          <el-option label="百科" value="pedia"></el-option>
          <el-option label="举报" value="report"></el-option>
          <el-option label="黑名单" value="blackList"></el-option>
          <el-option label="推球" value="ball"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="百科内容" prop="content">
        <quill-editor
          v-model="form.content"
          ref="quillEditor"
          :option="editorOption"
        ></quill-editor>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { quillEditor } from 'vue-quill-editor';

export default {
  name: '',
  components: {
    quillEditor
  },
  data() {
    return {
      show: true,
      form: {
        name: '',
        cate: 'about',
        content: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入词条名称', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入百科内容', trigger: 'blur' }
        ]
      },
      editorOption: {
        modules: {
          theme: 'snow',
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['link', 'image', 'video'] // 链接、图片、视
          ]
        }
      }
    };
  },
  methods: {
    save() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }
        this.$api.savePedia(this.form).then(() => {
          this.$message('添加成功');
        }).catch(() => {
          this.$message('添加成功');
          this.$emit('close');
          this.show = false;
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .el-select {
    width: 100%;
  }
  .dialog-wrap /deep/ .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .dialog-wrap /deep/ .ql-snow .ql-picker.ql-size .ql-picker-item::before,
  .dialog-wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .dialog-wrap /deep/ .ql-snow .ql-picker.ql-header .ql-picker-item::before,
  .dialog-wrap /deep/ .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .dialog-wrap /deep/ .ql-snow .ql-picker.ql-font .ql-picker-item::before,
  .dialog-wrap /deep/ .ql-toolbar.ql-snow .ql-picker-label,
  .dialog-wrap /deep/ .ql-snow .ql-color-picker .ql-picker-label svg,
  .dialog-wrap /deep/ .ql-snow .ql-icon-picker .ql-picker-label svg {
    vertical-align: top;
  }
</style>
